<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>liuboy.文章</title>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2531843_db7g6z3cnbl.css"/>
		<style>
			ul{
				list-style:none;
			}
			a{
				text-decoration:none;
			}
			.page{
				margin:0.625rem 0;
				padding:0.3125rem;
				font-size:.8rem;
				background:#ccc;
				border-radius:0.3125rem;
			}
			ol{
				padding:0.3125rem 1.25rem;
				margin:0;
				color:#f5f5f5;
			}
			ol li{
				border-bottom:1px dotted seagreen;
			}
			ol li:nth-child(1){
				width:50%;
			}
			ol li:nth-child(2){
				width:60%;
			}
			ol li:nth-child(3){
				width:70%;
			}
			ol li:nth-child(4){
				width:80%;
			}
			ol li:nth-child(5){
				width:90%;
			}
			ol li:nth-child(6){
				width:100%;
			}
			.page a{
				padding:0.3125rem 0.3125rem;
				color:seagreen;
			}
			.pageTitle{
				display:inline-block;
				padding:0 0.3125rem ;
				border-radius:0.3125rem;
				color:#fff;
				background:#3CB371;
			}
			.footer{
				font-size:.9rem;
				text-align:center;
			}
			.pagination{
				margin:10px 0;
			}
			.active{
				background:#3CB371;
				color:#fff;
			}
			/*手机端*/
			@media screen and (max-width:429px){
				.header{
					display:flex;
					width:100%;
					flex-wrap:wrap;
				}
				.title{
					width:90%;
				}
				i{
					width:10%;
				}
				.nav{
					width:100%;
					height:0;
					margin:.75rem 0;
					overflow:hidden;
					transition:height .3s linear 0s;
					background:rgba(46,139,87,1);
					border-radius:.375rem;
				}
				ul{
					padding:0 2.5rem;
					margin:0.625rem 0;
				}
				.nav li{
					width:100%;
					margin:3px 0;
					line-height: 1.3rem;
					background:rgba(211,211,211,.1);
					border-radius:3px;
				}
				.nav li:nth-child(2){
					width:95%;
				}
				.nav li:nth-child(3){
					width:90%;
				}
				.nav a{
					padding-left:0.9375rem;
					font-size:.9rem;
					color:#000;
				}
				.nav a i{
					font-size:.8rem;
					color:#ccc;
				}
				
				}
				@media screen and (min-width:480px){
					*{
						margin:0;
						padding:0;
					}
					html{
						font-size:22px;
					}
					.header i{
						display:none;
					}
					ul{
						overflow:hidden;
						width:91%;
						height:50px;
						margin:10px auto;
						background:rgba(46,139,87,1);
					}
					ul li{
						float:left;
					}
					.jilu{
						clear:both;
					}
					ul li a{
						line-height:50px;
						color:#fff;
					}
					.jilu,.page,.pagination{
						width:90%;
						margin:10px auto;
					}
					.pagination select{
						font-size:.8rem;
					}
					.pagination input{
						font-size:1rem;
					}
				}
		</style>
	</head>
	<body>
	<div class="header">
				<div class="title"> liuboy 起点</div>
				<i>三</i>
				<div class="nav">
					<ul>
						<li><a href="index.html"><i class="iconfont icon-zhuye"></i>&nbsp;主页</a></li>
						<li><a href="jilu.html"><i class="iconfont icon-jilu1"></i>&nbsp;记录</a></li>
						<li><a href="pages.html"><i class="iconfont icon-wenzhang"></i>&nbsp;文章</a></li>
					</ul>
				</div>
			</div>
			<!--文章-->
				<div class="page">
					<div class="pageTitle">文章</div>
						<div class="pageList">
							<ol>
								
							</ol>
						</div>
				</div>
			<div class="pagination">
				<select name="pageSize">
					<option value="1">1条</option>
					<option value="2">2条</option>
					<option value="3">3条</option>
				</select>
					/页
			</div>
			<!--尾部-->
			<div class="footer">
				<i>版权所有</i>
			</div>
		</body>
		<script src="./ajax.js"></script>
		<script>
			var $ = (el)=>{return document.querySelector(el)}
			var i = $("i")
			var nav = $(".nav")
			var ol = $('ol')
			var select = $('select')
			var pagination = $('.pagination')
			i.addEventListener("click",()=>{if(nav.style.height=='5.625rem'){nav.style.height='0'}else{nav.style.height=5.625+'rem'};})
			var pageNum = 1
			var pageSize = 1
			ajax({
				url:'http://localhost:3000/pages',
				type:'POST',
				async:true,
				data:{
					pageNum,
					pageSize
				},
				success:function(pageData){
					console.log(pageData)
					var pageDataJson = JSON.parse(pageData)
					//拿到数据根据数据操作dom
					var pageInfoItemsList =[]
					for(i=0;i<pageDataJson.data.length;i++){
					var li = document.createElement('li')
					var a = document.createElement('a')
					a.href = './pageInfo.html?id='+pageDataJson.data[i].id
					a.innerHTML = pageDataJson.data[i].title
					li.appendChild(a)
					pageInfoItemsList.push(li)
					ol.appendChild(li)
					}
					//动态生成分页按钮
					select.onchange = function(){
						for(l=0;l<(pageDataJson.data.length);l++){
						ol.removeChild(pageInfoItemsList[l])
							console.log(pageDataJson)
						}
						for(m=0;m<(pageDataJson.allPageSize+2);m++){
						pagination.removeChild(inputList[m])
						console.log(inputList[m])
						}
						// setTimeout(function(){
							window.pageNum = 1
							window.pageSize = select.value
							console.log(window.pageSize)
							getJiLu(window.pageNum,window.pageSize)
						// },100)
						
						
					}
					var inputList =[]
					var input = document.createElement('input')
					input.type = 'button'
					input.value = "<"
					input.onclick = function(){
						for(l=0;l<pageDataJson.data.length;l++){
						ol.removeChild(pageInfoItemsList[l])
						}
						for(m=0;m<pageDataJson.allPageSize+2;m++){
						pagination.removeChild(inputList[m])
						}
						window.pageNum = pageNum-1
						if(window.pageNum<1){
							window.pageNum = 1
						}
						getJiLu(window.pageNum,pageSize)
						console.log(window.pageNum)
					}
					inputList.push(input)
					pagination.appendChild(input)
					
					for(j=1;j<=pageDataJson.allPageSize;j++){
					var input = document.createElement('input')
					input.type = 'button'
					input.value = j
					input.id = j
					input.setAttribute('data-num',j) 
					inputList.push(input)
					input.onclick =function(e){
						console.log(e.target.getAttribute('data-num'))
						 window.pageNum = e.target.getAttribute('data-num')
						 for(l=0;l<pageDataJson.data.length;l++){
						 ol.removeChild(pageInfoItemsList[l])
						 }
						 for(m=0;m<pageDataJson.allPageSize+2;m++){
						 pagination.removeChild(inputList[m])
						 }
						getJiLu(window.pageNum,pageSize)
					}
					pagination.appendChild(input)
					}
					var input = document.createElement('input')
					input.type = 'button'
					input.value = ">"
					input.onclick = function(){
						for(l=0;l<pageDataJson.data.length;l++){
						ol.removeChild(pageInfoItemsList[l])
						}
						for(m=0;m<pageDataJson.allPageSize+2;m++){
						pagination.removeChild(inputList[m])
						}
						window.pageNum = pageNum+1
						if(window.pageNum>pageDataJson.allPageSize){
							window.pageNum = pageDataJson.allPageSize
						}
						getJiLu(window.pageNum,pageSize)
						console.log(window.pageNum)
					}
					inputList.push(input)
					//设置默认按钮选中
					inputList[1].className = 'active'
					pagination.appendChild(input)
					
			
			function getJiLu(pageNum,pageSize){
				ajax({
					url:'http://localhost:3000/pages',
					type:'POST',
					async:true,
					data:{
						pageNum,
						pageSize
					},
					success:function(pageData){
						console.log(pageData)
						var pageDataJson = JSON.parse(pageData)
						//拿到数据根据数据操作dom
						var pageInfoItemsList =[]
						for(i=0;i<pageDataJson.data.length;i++){
						var li = document.createElement('li')
						var a = document.createElement('a')
						a.href = './pageInfo.html?id='+pageDataJson.data[i].id
						a.innerHTML = pageDataJson.data[i].title
						li.appendChild(a)
						pageInfoItemsList.push(li)
						ol.appendChild(li)
						}
						//动态生成分页按钮
						select.onchange = function(){
							for(l=0;l<(pageDataJson.data.length);l++){
							ol.removeChild(pageInfoItemsList[l])
								console.log(pageDataJson)
							}
							for(m=0;m<(pageDataJson.allPageSize+2);m++){
							pagination.removeChild(inputList[m])
							console.log(inputList[m])
							}
							// setTimeout(function(){
								window.pageNum = 1
								window.pageSize = select.value
								console.log(window.pageSize)
								getJiLu(window.pageNum,window.pageSize)
							// },100)
							
							
						}
						var inputList =[]
						var input = document.createElement('input')
						input.type = 'button'
						input.value = "<"
						input.onclick = function(){
							for(l=0;l<pageDataJson.data.length;l++){
							ol.removeChild(pageInfoItemsList[l])
							}
							for(m=0;m<pageDataJson.allPageSize+2;m++){
							pagination.removeChild(inputList[m])
							}
							window.pageNum = pageNum-1
							if(window.pageNum<1){
								window.pageNum = 1
							}
							getJiLu(window.pageNum,pageSize)
							console.log(window.pageNum)
						}
						inputList.push(input)
						pagination.appendChild(input)
						for(j=1;j<=pageDataJson.allPageSize;j++){
						var input = document.createElement('input')
						input.type = 'button'
						input.value = j
						input.id = j
						input.setAttribute('data-num',j) 
						inputList.push(input)
						input.onclick =function(e){
							console.log(e.target.getAttribute('data-num'))
							 window.pageNum = e.target.getAttribute('data-num')
							 for(l=0;l<pageDataJson.data.length;l++){
							 ol.removeChild(pageInfoItemsList[l])
							 }
							 for(m=0;m<pageDataJson.allPageSize+2;m++){
							 pagination.removeChild(inputList[m])
							 }
							getJiLu(window.pageNum,pageSize)
						}
						pagination.appendChild(input)
						}
						var input = document.createElement('input')
						input.type = 'button'
						input.value = ">"
						input.onclick = function(){
							for(l=0;l<pageDataJson.data.length;l++){
							ol.removeChild(pageInfoItemsList[l])
							}
							for(m=0;m<pageDataJson.allPageSize+2;m++){
							pagination.removeChild(inputList[m])
							}
							window.pageNum = pageNum+1
							if(window.pageNum>pageDataJson.allPageSize){
								window.pageNum = pageDataJson.allPageSize
							}
							getJiLu(window.pageNum,pageSize)
							console.log(window.pageNum)
						}
						inputList.push(input)
						inputList[window.pageNum].className = 'active'
						pagination.appendChild(input)
						}
					
			})
			}
			}
			})
		</script>
	</html>
	